<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
v-for根据数据生成列表结构，可以非常便捷的操作列表
语法：v-for="(当前遍历的值,索引) in 需要遍历的集合或数组"，其中索引可有可无

v-for：用来对 对象 进行遍历的（JavaScript 中数组也是对象的一种）
在使用 v-for 的时候一定要注意加入:key 用来给 Vue 内部提供重用和排序的唯一 key
遍历时可以获取 索引 index、key和value
<div id="app">
    <ul>
        数组，不带索引的遍历
        <li v-for="item in arr">
            我去过的地方:{{item}}
        </li>
        数组，带索引的遍历,索引从0开始
        <li v-for="(item,index) in arr">
            {{index+1}}.我去过的地方:{{item}}
        </li>
        对象数组，不带索引的遍历
        <table border="1">
            <tr>
                <td>菜名</td>
                <td>颜色</td>
            </tr>
            <tr v-for="item in vegetables">
                <td>{{item.name}}</td>
                <td>{{item.color}}</td>
            </tr>
        </table>
        <input type="button" value="添加数据" @click="addItem()">
        <input type="button" value="移除数据" @click="removeItem()">
        对象，不带索引，item是当前遍历的value
        <li v-for="item in school">
            {{item}}
        </li>
        对象，带索引，item是value，key是键
        <li v-for="(item,key) in school">
            {{key}}：{{item}}
        </li>
    </ul>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:["成都","自贡","内江","杭州"],
            vegetables:[
                {name:"西兰花炒鸡蛋",color:"黄黄绿绿的"},
                {name:"爆炒西兰花",color:"绿不拉几的"}
            ],
            school:{name:"电子科技大学",address:"成都"}
        },
        methods:{
            addItem:function () {
                var newVagetable = {name:"花菜炒蛋",color:"黄不垃几的"};
                this.vegetables.push(newVagetable);
            },
            removeItem:function () {
                this.vegetables.pop();
            }
        }
    });
</script>
</body>
</html>